<template>

  <div class="card">
    
    <div class="card_shell" v-for="(item,index) in list">
      <p class="card_subtit">{{item.title}}</p>
      <div class="card_main">
        <div>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.id" v-model="pick" @click="changeTotal(index)">
          <label v-bind:for="item.id" @click="changeTotal(index)">{{item.number}}次 {{item.amount}}元</label>
        </div>
      </div>
    </div>
    <!-- <div class="card_shell">
      <p class="card_subtit">轿车</p>
      <div class="card_main" v-for="item in car">
        <div>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.value" v-model="pick">
          <label v-bind:for="item.id">{{item.label}}</label>
        </div>
      </div>
    </div>

    <div class="card_shell">
      <p class="card_subtit">SUV</p>
      <div class="card_main" v-for="item in suv">
        <div>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.value" v-model="pick">
          <label v-bind:for="item.id">{{item.label}}</label>
        </div>
      </div>
    </div>

    <div class="card_shell">
      <p class="card_subtit">MPV</p>
      <div class="card_main" v-for="item in mvp">
        <div>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.value" v-model="pick">
          <label v-bind:for="item.id">{{item.label}}</label>
        </div>
      </div>
    </div> -->

    <p class="card_intro">*为了保障您的利益，请购买与车型对应的会员卡</p>

    <div class="card_buy">
      <div class="card_buy_subtit">合计</div>
      <div class="card_buy_all">
        总需支付：<span>{{total}}元</span>
      </div>
      <button class="card_btn" @click="pay">立即支付</button>
    </div>

  </div>
  
</template>

<script>
  import axios from 'axios';
  import global from '../../../utils/global'
  import store from '../../../utils/store'
  export default {
    name: 'Card',
    data () {
      return {
        pick: '',
        total: '0',
        list: [],
        car:[
          {
            id: 'car1',
            value: 'car200',
            label: '12次 200元',
          },
          {
            id: 'car2',
            value: 'car400',
            label: '25次 400元',
          },
        ],
        suv:[
          {
            id: 'suv1',
            value: 'suv200',
            label: '12次 200元',
          },
          {
            id: 'suv2',
            value: 'suv400',
            label: '25次 400元',
          },
        ],
        mvp:[
          {
            id: 'mpv1',
            value: 'mpv200',
            label: '12次 400元',
          },
          {
            id: 'mpv2',
            value: 'mpv400',
            label: '25次 400元',
          },
        ],
      }
    },
    mounted(){
      this.getInfo();
      this.$root.share();
    },
    methods: {
      // 获取信息
      getInfo(){

        var that = this;

        axios.get(global.api.carCard.list,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        })

        .then(function(res){

          console.log(res);
          that.list = res.data.data;

        })

        .catch(function(res){

          console.log(res);

        })

      },

      // 立即支付
      pay () {

        var that = this;
        var picked = that.pick;
        console.log(picked);

        if (picked == '' || picked == null){

          console.log("还没有选择！！！");
          alert("请先选中您所购买的卡！");

        } else {

          axios.post(global.api.carCard.cardbuy,{
            uuid: localStorage.getItem('carWashUuid'),
            onlycardid: that.pick,
          })

          .then(function(res){

            console.log("then");
            console.log(res);
            
            if (res.data.code == 0) {

              window.location.href = "/app/index.php?i=2&c=entryApi&m=yimi_car&do=onecard&op=orderPay&uuid="+localStorage.getItem('carWashUuid')+"&orderid="+res.data.data.id

            }

          })

          .catch(function(res){

            console.log("catch");
            console.log(res);

          })

        }

      },

      // 选择
      changeTotal (index) {
      
        var that = this;
        that.total = that.list[index].amount;
      
      },
    },
  }
</script>
  
<style scoped>
  .card{
    background-color: #EFEFEF;
    padding-top: 1rem;
    text-align: left;
  }
  .card_shell {
    /*width: 84%;*/
    width: 94%;
    margin: 0 auto 1rem;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 5%;
  }
  .card_subtit {
    line-height: 2rem;
    padding-left: 0.5rem;
    border-bottom: 0.6rem solid #E4E4E6;
    margin-bottom: 0.5rem;
    font-weight: bold;
  }
  .card_main {
    padding-left: 0.5rem;
    line-height: 2.5rem;
  }
  .card_main div {}
  .card_main input {}
  .card_main label {}
  .card_intro{
    font-size: 0.8rem;
    color: #888888;
    text-align: center;
    margin-bottom: 1rem;
  }
  .card_buy{
    /*width: 90%;*/
    padding: 0 5%;
    background-color: #fff;
  }
  .card_buy_subtit{
    line-height: 3.8rem;
    border-bottom: 1px solid #B3B3B4;
    font-size: 1.1rem;
    color: #2ecc80;
    padding-left: 1rem;
  }
  .card_buy_all{
    line-height: 4.3rem;
    padding-left: 1rem;
  }
  .card_buy_all span{
    font-size: 1.3rem;
  }
  .card_btn{
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #19C674;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  .card_btn:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_center{
    justify-content: space-between;
    align-items: center;
  }
  .start_center{
    justify-content: flex-start;
    align-items: flex-start;
  }
  .start_end{
    justify-content: flex-start;
    align-items: flex-end;
  }
</style>
